<template>
    <div style="width: 100%;height: 100%; overflow: hidden; background-color: #b4eaf7;">
        <vue-particles
                class="login-bg"
                color="#39AFFD"
                :particleOpacity="0.7"
                :particlesNumber="100"
                shapeType="circle"
                :particleSize="4"
                linesColor="#8DD1FE"
                :linesWidth="1"
                :lineLinked="true"
                :lineOpacity="0.4"
                :linesDistance="150"
                :moveSpeed="3"
                :hoverEffect="true"
                hoverMode="grab"
                :clickEffect="true"
                clickMode="push">
        </vue-particles>
        <div class="login_box">
            <el-row>
                <el-col :xs="0" :sm="12" :md="12" :lg="12" :xl="12">
                        <img src="/image/Team work_Monochromatic.png"  style="position: relative;top: -115px;left: 50%"/>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="10" :xl="10">
                    <el-card :body-style="{ padding: '0px' }" style="width: 420px">
                        <div class="login_image">
							<img src="/image/logo.png" />
                        </div>
                        <el-form label-width="0px"
                                 ref="login_form_ref"
                                 :model="user"
                                 class="login_form">
                            <el-form-item prop="username">
                                <el-input prefix-icon="el-icon-user-solid" v-model="user.username" placeholder="请输入账号电话"></el-input>
                            </el-form-item>
                            <el-form-item prop="password">
                                <el-input type="password" prefix-icon="el-icon-lock" v-model="user.password" placeholder="输入密码"></el-input>
                            </el-form-item>
                            <el-row class="btns">
                                <el-row :gutter="20">
                                    <el-col :span="10" :offset="1">
                                        <el-button style="width: 100%" type="primary" @click="btn_login">登录</el-button>
                                    </el-col>
                                    <el-col :span="10" :offset="1">
                                        <el-button style="width: 100%" type="info" @click="btn_Reach">重置</el-button>
                                    </el-col>
                                </el-row>
                            </el-row>
                        </el-form>
                    </el-card>
                </el-col>
            </el-row>
        </div>
        <div class="lab_bottom">
            <label></label>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Login',
        data() {
            return {
                user: {
                    username: '',
                    password: '',
                }
            }
        },
        methods: {
            btn_login() {
				let _this = this 
                let loadding = this.openLoading();
                this.$http.post('/api/Values/Login', this.user).then(res => {
					loadding.close();
					const {
						StatusCode,
						Data,
						Message
					} = res.data || 0
                    if (StatusCode == 200) {
						window.sessionStorage.setItem('token', Data.token);
                        var user = { Id: Data.dat.Id, UserName: Data.dat.UserName, RoleId: '', UserPosition: '' }
                        this.$store.commit('setdata', user)
						this.$message.success('登录成功!')
						this.$router.push({ path: '/Main' })
                    } else {
                        this.$message.warning('登录失败,请重试!')
                    }
                })
            },
            btn_Reach() {
                this.$refs['login_form_ref'].resetFields()
            },
        }
    };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .login_container {
        width: 100%;
        height: 100%;
        overflow: hidden;
        background-size: cover;
        z-index: 1;
        /*filter: blur(2px);*/
    }

    .login_box {
        width: 100%;
        height: 300px;
        border-radius: 3px;
        position: absolute;
        left: 50%;

        top: 50%;
        background-color: white;
        transform: translate(-50%, -50%);
        opacity: 0.9;
        /*filter: blur(2px);*/
        /*z-index: 121;*/
    }


    .login_box:hover {
         opacity: 0.9;
    }
    .login_image {
        position: absolute;
        border-radius: 50%;
        width: 160px;
        height: 160px;
        padding: 10px;
        border: #eee 1px solid;
        left: 50%;
        transform: translate(60%, -75%);
        box-shadow: 0 0 10px #ddd;
        background: #fff;
		text-align: center;
    }
	.login_image img {
	    width: 125px;
	    height: 110px;
	    padding: 20px 10px;
	}
    .lab_bottom{
        position: absolute;
        left: 50%;
        top: 80%;
        transform: translate(-50%,-400%);
        color: white;
    }
    .login_form {
        width: 300px;
        padding: 67px 60px;
        z-index: 11;
    }
    .login-bg{
        width: 100%;
        height: 100%;
        background: #3E3E3E;
    }
</style>

